<template>
  <div class="app-main">
    <div class="operation-contain">
      <div class="operation-left">
        <el-input v-model="list.filters.search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" size="medium" @input="getSearch"></el-input>
        <el-select v-model="list.filters.status" placeholder="请选择" clearable size="medium" @change="getSearch">
          <el-option label="启用" value="true"></el-option>
          <el-option label="停用" value="false"></el-option>
        </el-select>
      </div>
      <div class="operation-right">
        <el-button v-perms="'system:user:add'" type="primary" @click="$refs.myDialog.open()" size="medium" class="el-icon-circle-plus-outline" plain> 新增</el-button>
        <el-button v-perms="'system:user:delete'" type="danger" @click="batchDelete" size="medium" class="el-icon-delete pad" :disabled="multipleSelection.length > 0 ? false : true"> 删除</el-button>
        <d-dropdown :isShow.sync="isShow"/>
      </div>
    </div>
    <div class="table-contain">
      <el-table
        ref="table"
        height="100%"
        :data="list.data"
        style="width: 100%;"
        row-key="id"
        border
        stripe
        v-loading="list.loading"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" reserve-selection align="center">
        </el-table-column>
        <el-table-column v-if="isShow[0].value" label="头像" align="center" sortable="custom" prop="avatar" min-width="120">
          <template v-slot="{ row }">
            <img class="img-avatar" :src="row.avatar" alt="">
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[1].value" label="用户名" align="center" sortable="custom" prop="username" min-width="120">
          <template v-slot="{ row }">
            {{ row.username }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[2].value" label="昵称" align="center" sortable="custom" prop="nickname" min-width="120">
          <template v-slot="{ row }">
            {{ row.nickname }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[3].value" label="角色" align="center" sortable="custom" prop="role" min-width="120">
          <template v-slot="{ row }">
            {{ row.ur[0].name }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[4].value" label="状态" width="90" align="center" sortable="custom" prop="status">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status" @change="changeStatus(row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[5].value" label="手机号码" align="center" sortable="custom" prop="phone" min-width="120">
          <template v-slot="{ row }">
            {{ row.phone }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[6].value" label="邮箱" align="center" sortable="custom" prop="email" min-width="120">
          <template v-slot="{ row }">
            {{ row.email }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[7].value" label="性别" align="center" sortable="custom" prop="gender" min-width="120">
          <template v-slot="{ row }">
            {{ row.gender }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[8].value" label="创建时间" align="center" sortable="custom" prop="ctime" min-width="180">
          <template v-slot="{ row }">
            {{ row.ctime }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[9].value" label="更新时间" align="center" sortable="custom" prop="mtime" min-width="180">
          <template v-slot="{ row }">
            {{ row.mtime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" >
          <template v-slot="{ row }">
            <el-button v-perms="'system:user:update'" type="success" icon="el-icon-edit" size="mini" class="pad" @click="$refs.myDialog.detaliInfo(row.id)"></el-button>
            <!-- 用户中管理员不能被删除 -->
            <el-popconfirm v-if="row.ur[0] && row.ur[0].name !== 'admin'"
              @confirm="confirmDelete(row.id)"
              title="确定删除这条信息吗？">
              <el-button v-perms="'system:user:delete'" slot="reference" v-if="row.ur[0] && row.ur[0].name !== 'admin'" type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-popconfirm>
            <el-tooltip class="item" effect="dark" content="重置" placement="top">
              <el-button v-perms="'system:user:resetPwd'" type="warning" icon="el-icon-key" size="mini" class="pad-left" @click="resetPwd(row.id)" :loading="loading"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dPagination :page.sync="list.page" :size.sync="list.size" :total="list.total" @getList="getList" />
    <my-dialog ref="myDialog" :dialogVisible.sync="dialogVisible" @getAll="getList" :list="list.data" />
  </div>
</template>

<script>
import myDialog from './Dialog'
export default {
  name: 'SystemUser',
  components: {
    myDialog
  },
  data () {
    return {
      isShow: [
        { label: '头像', value: true, disable: true },
        { label: '用户名', value: true, disable: true },
        { label: '昵称', value: true, disable: false },
        { label: '角色', value: true, disable: false },
        { label: '状态', value: true, disable: false },
        { label: '手机号码', value: true, disable: false },
        { label: '邮箱', value: true, disable: false },
        { label: '性别', value: false, disable: false },
        { label: '创建时间', value: true, disable: false },
        { label: '更新时间', value: false, disable: false },
      ],
      list: {
        data: [],
        loading: false,
        page: 1,
        total: 0,
        size: 10,
        filters: {
          search: '',
          status: null,
          prop: '',
          order: ''
        }
      },
      dialogVisible: false,
      multipleSelection: [],
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getSearch () {
      this.list.page = 1
      this.getList()
    },
    handleSelectionChange (val) { // 当选择项发生变化时会触发该事件
      this.multipleSelection = val
      console.log(val)
    },
    changeStatus (val) { // switch 触发回调更新状态
      this.$API({
        name: 'updateUser',
        data: {
          user: {
            id: val.id,
            status: val.status
          }
        },
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200 && res.data.data[0] === 1) {
          this.$notify.success(res.data.msg)
          this.getList()
        } else {
          this.$notify.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
      })
    },
    // 排序回调（prop 排序字段 order 排序方式）
    sortChange (column) {
      if (column.order == 'ascending') {
        this.list.filters.order = 'asc'
      } else {
        this.list.filters.order = 'desc'
      }
      this.list.filters.prop = column.prop
      this.getList()
    },
    getList () { // 获取列表
      this.list.loading = true
      this.$API({
        name: 'getUserList',
        params: {
          page: this.list.page,
          size: this.list.size,
          search: this.list.filters.search,
          status: this.list.filters.status,
          order: this.list.filters.prop,
          sort: this.list.filters.order
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          this.list.total = res.data.data.count
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    confirmDelete (id) { // 删除
      this.$API({
        name: 'deleteUser',
        paths: [id],
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200 && res.data.data === 1) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.getList()
      })
    },
    resetPwd (id) { // 重置密码
      this.loading = true
      this.$API({
        name: 'resetPwd',
        data: {
          password: '111111',
          id
        },
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200 && res.data.data[0] === 1) {
          this.$notify.success(res.data.msg)
        } else if (res.data.code === 401) {
          this.$notify.error(res.data.msg)
        } else {
          this.$notify.error('更新失败')
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
    batchDelete () { // 批量删除

    }
  },
  // 解决 el-table 更新列时的抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      // 在数据加载完，重新渲染表格
      this.$refs.table.doLayout()
    }) 
  },
}
</script>

<style lang="scss" scoped>
.app-main {
  .img-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
</style>